Cards Basic
Basic Cards
Basic card good at containing small bits of information.
I am a very simple card with solid background & link. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
I am a very simple card with gradient background & button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Image Card
Here is the standard card with an image thumbnail.
Card
Title
I am a very simple card with link. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Card
Title
I am a very simple card with button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
FABs in Cards
Here is an image card with a Floating Action Button.
I am a very simple card with small size solid color fab button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
I am a very simple card with large size gradient color fab button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Horizontal Card
Here is the standard card with a horizontal image.
I am a very simple card with link. I am good at containing small bits of information.
I am a very simple card with button. I am good at containing small bits of.
Card Reveal
Here you can add a card that reveals more information once clicked.
Here is some more information about this product that is only revealed once clicked on.
Just add the card-reveal div with a
span.card-title inside to make this work. Add the class
activator to an element inside the card to allow it to
open the card
reveal.
Here is some more information about this product that is only revealed once clicked on.
The default state is having the card-reveal go over the card-action.
Here is some more information about this product that is only revealed once clicked on.
You can make your card-action always visible by adding the class
sticky-action to the overall card.
Tabs in Cards
For a simpler card with less markup, try using a card panel which just has padding and a shadow effect
White
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
social innovation
Empower change-makers; a challenges and opportunities collective impact collaborate.Colored
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
social innovation
Empower change-makers; a challenges and opportunities collective impact collaborate.Card Size
Small
The Small Card limits the height of the card to 300px.
Card Title
I am a very simple card. I am good at containing small bits of information.
Medium
The Medium Card limits the height of the card to 400px.
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Large
The Large Card limits the height of the card to 500px.
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Card Panel
For a simpler card with less markup, try using a card panel which just has padding and a shadow effect